<template>
	<view class="main">
		<van-toast id="van-toast" />
		<tou_hand handtype='false' ref="mainindex"></tou_hand>
		
		<view class="show">
			<view class="sone">
				<input placeholder="输入设备的编号" type="number" maxlength="10" v-model="sbnum" />
				<view class="sonebtn" @click="handbtn">
					确 认
				</view>
			</view>
			
			<view class="sthree">
				<view class="sthreehand">
					远程充电说明:
				</view>
				<view class="sthreez">
					1.请输入所插入充电器的设备编号进行远程充电； <br />
					2.充电过程中如遇到异常问题，请联系当前小区的运营商进行协调；<br />
					<!-- 4.如有疑问请拨打全国客服电话<span style="color: #EF87D6;">400 888 0292</span> -->
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import tou_hand from '../../components/tou_hand/tou_hand.vue'
	export default {
		components: {
			tou_hand
		},
		data() {
			return {
				sbnum: '', //设备编号
				timeId: 0,
				imgArr: [],
				stype: '0',
				checked1: false
			}
		},
		onShow() {
			
		},
		methods: {
			
			//手动输入进入上电页面
			handbtn() {
				if (this.sbnum.indexOf(".") > 0) {
					this.$toast.fail('禁止输入小数点')
				} else if (this.sbnum.length != 10 && this.sbnum.length != 8) {
					this.$toast.fail('请输入正确设备号')
				} else {
					var device = this.sbnum.substring(0, 8)
					let port=''
					if(this.sbnum.length==10){
						port = Number(this.sbnum.substring(8, 10)) - 1
						var t = (port + '').length
						var s = ''
						for (var i = 0; i < 2 - t; i++) {
							s += '0';
						}
						port = s + port
						if (Number(this.sbnum.substring(8, 10)) < 1 || Number(this.sbnum.substring(8, 10)) > 16) {
							this.$toast.fail('设备端口号不正确')
							return
						}
						uni.navigateTo({
							url: '../poweron/poweron?device=' + device + '&port=' + port + '&cmd=' + 1 + '&from=' + 2+'&yc='+'1'
						})
					}else if(this.sbnum.length==8){
						port='00'
						uni.navigateTo({
							url: '../poweron/poweron?device=' + device + '&port=' + port + '&cmd=' + 1 + '&from=' + 3+'&yc='+'1'
						})
					}

				}
			},
			//16进制转10进制
			pad(num, n) {
				var len = num.toString().length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				return num;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		background-color: #2A3034;

		.show {
			width: 100%;
			margin-top: 85upx;
			margin-bottom: 41upx;
			box-sizing: border-box;
			padding: 10upx 32upx;
			background-color: #2A3034;

			.sone {
				width: 100%;
				background-color: #3A4044;
				display: flex;
				justify-content: space-between;
				padding: 30upx;
				box-sizing: border-box;
				border-radius: 10upx;

				.sonebtn {
					width: 180upx;
					padding: 10upx 5upx;
					font-size: 28upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 30upx;
					background-color: #8DC321;
					text-align: center;
				}

				// image {
				// 	width: 64upx;
				// 	height: 62upx;
				// }
				/deep/.uni-input-placeholder {
					color: #FFFFFF;
				}

				input {
					width: 502upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #D0D0D0;
					padding: 11upx 0;
				}
			}

			.stwo {
				width: 100%;
				box-sizing: border-box;
				background-color: #3A4044;
				padding: 36upx 0;
				margin-top: 22upx;
				border-radius: 10upx;

				.kfour {
					width: 100%;
					box-sizing: border-box;
					text-align: center;

					.kfourtxt {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #D0D0D0;
						margin-top: 24upx;
					}

					.montbtn {
						width: 100upx;
						height: 62upx;
						border-radius: 10upx;
						background-color: #4B98ED;
						color: #FFFFFF;
						line-height: 62upx;
						text-align: center;
						margin: 10 auto;
					}

					.add-img-box {
						display: flex;
						// width: 750rpx;
						//padding: 0 40rpx;
						flex-direction: row;
						flex-wrap: wrap;
					}

					.add-img-item {
						width: 300upx;
						height: 300upx;
						border-radius: 16upx;
						position: relative;
						padding: 9rpx 0;
						margin: 0 auto;
					}

					.add-img-camera {
						flex: 1;
					}

					.add-img {
						width: 300upx;
						height: 300upx;
						border-radius: 16upx;
					}

					.add-img-item1 {
						width: 202upx;
						height: 202upx;
						position: relative;
						padding: 9rpx 0;
						margin: 0 auto;
					}

					.add-img1 {
						width: 202upx;
						height: 202upx;
					}

					.add-img-del {
						position: absolute;
						width: 40rpx;
						height: 40rpx;
						right: -14upx;
						top: -6upx;
						border-radius: 20rpx;
					}

					.address-time {
						width: 484rpx;
						height: 88rpx;
						background-color: rgba(245, 245, 245, 1);
						opacity: 1;
						border-radius: 24rpx;
						text-align: center;

						font-size: 35rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}

					.line {
						width: 750rpx;
						height: 1px;
						transform: scaleY(0.3);
						background-color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.sthree {
				font-size: 24upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 500;
				color: #AFB0B0;
				line-height: 46upx;
				margin-top: 28upx;

				.sthreehand {
					font-size: 28upx;
					font-family: PingFangSC-Medium, PingFang SC;
					color: #FFFFFF;
					font-weight: 700;
				}
			}
		}

		.footdibu {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			// background-color: rgba(0,0,0,.7);
			.fdbfive {
				position: absolute;
				top: 30upx;
				right: 30upx;
				width: 94upx;
				height: 46upx;

				image {
					width: 94upx;
					height: 46upx;
				}
			}

			.fdbone {
				position: absolute;
				width: 230upx;
				height: 70upx;
				top: 438upx;
				left: 38upx;
				border-radius: 50upx;
				box-shadow: rgba(0, 0, 0, .6) 0 0 0 100vh;
			}

			.fdbone1 {
				position: absolute;
				width: 446upx;
				height: 446upx;
				top: 372upx;
				left: 146upx;
				background-color: #FFFFFF;
				opacity: 0.9;
				border-radius: 50upx;
				box-shadow: rgba(0, 0, 0, .6) 0 0 0 100vh;
				text-align: center;

				image {
					margin-top: 46upx;
					width: 118upx;
					height: 254upx;
				}

				.fdbone1txt {
					font-size: 25upx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #000000;
					margin-top: 26upx;
				}
			}

			.fdbonenext {
				position: absolute;
				width: 320upx;
				height: 80upx;
				top: 722upx;
				left: 213upx;
				border-radius: 50upx;
				background-color: #FFFFFF;
				opacity: 0.1;
			}

			.fdbtwo {
				position: absolute;
				width: 20upx;
				height: 134upx;
				top: 826upx;
				left: 358upx;

				image {
					width: 20upx;
					height: 134upx;
				}
			}

			.fdbthree {
				position: absolute;
				width: 450upx;
				top: 972upx;
				text-align: center;
				left: 142upx;
				color: #FFFFFF;

				.fdbthreeshang {
					font-size: 34upx;
					font-family: YouYuan;
					font-weight: 400;
				}

				.fdbthreezhong {
					margin-top: 38upx;
					font-size: 21upx;
					font-family: YouYuan;
					font-weight: 400;
				}

			}

			.fdbfour {
				position: absolute;
				top: 1138upx;
				left: 272upx;
				width: 198upx;
				height: 76upx;

				image {
					width: 198upx;
					height: 76upx;
				}
			}

			.fdbfour1 {
				position: absolute;
				top: 900upx;
				left: 272upx;
				width: 198upx;
				height: 76upx;

				image {
					width: 198upx;
					height: 76upx;
				}
			}

			.fdbsix {
				position: absolute;
				top: 1030upx;
				left: 272upx;
				font-size: 23upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #FFFFFF;

				/deep/.van-checkbox__label {
					color: #FFFFFF;
				}

				/deep/.van-checkbox__icon--checked .van-icon {
					border-color: #FFFFFF;
					background-color: transparent;
				}

			}

		}
	}
</style>